<template>
    <div id="pieChart"></div>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance, watch, defineProps } from 'vue'
/*
    饼图数据类型：{ title: 主题名称, data:[ { value: 占比数值(int), name: 数据名 },... ]}
*/
// --父组件数据获取并监听--
const props = defineProps(['pieData', 'resizeOrNot'])
watch(() => props.pieData, () => {
    echartsInit()
}, { deep: true })
watch(() => props.resizeOrNot, () => {
    myChart.resize()
}, { deep: true })
let myChart = reactive({}) // echarts实例载体
const { proxy } = getCurrentInstance()
// 初始化echarts
let echartsInit = () => {
    // 初始化echarts实例
    myChart = proxy.$echarts.init(document.getElementById('pieChart'))
    let option = {
        title: {
            text: props.pieData.title,
            textStyle: {
                color: '#fff',
                fontSize: 25,
                fontWeight: 800,
                fontFamily: 'Microsoft YaHei',
                textBorderColor: '#191919',
                textBorderWidth: 5,
            },
            left: 'center',
            top: '10'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center',
            textStyle: {
                color: '#191919'
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderWidth: 5,
                    borderColor: '#202020',
                    borderRadius: 10,
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: props.pieData.data
            },
        ]
    }
    myChart.clear() // 清空实例，但似乎无效(无法消除警告)
    myChart.setOption(option)
}

onMounted(() => {
    // 初始化饼图
    echartsInit()
})
</script>

<style lang="scss" scoped>
#pieChart {
    height: 100%;
    width: 100%;
}
</style>